<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>

    <script src="load.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #login-div {
            width: 500px;
            height: 500px;
            border: 1px solid #ff5d39;
            position: relative;
        }

        h1 {
            text-align: center;
        }

        .input {
            height: 50px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin: 20px auto;
            color: #ccc;
            line-height: 50px;
            text-align: left;
        }

        .input-left {
            border-right: 1px solid #ccc;
            text-align: center;
            width: 100px;
            display: inline-block;
        }

        .login-btn {
            /*margin: 0 auto;*/
            display: inline-block;
            width: 160px;
            height: 50px;
            background-color: #4BC065;
            color: #fff;
            line-height: 50px;
            text-align: center;
            border-radius: 6px;
        }

        #captcha-box {
            position: absolute;
            left: 78px;
            top: 83px;
        }
    </style>

</head>
<body>


<div id="login-div">
    <!-- 装载验证码的DIV -->
    <div id="captcha-box"></div>
    <h1>用户登录</h1>
    <div class="input">
        <span class="input-left">用户名</span>
        xxxxx
    </div>
    <div class="input">
        <span class="input-left">密码</span>
        xxxxx
    </div>
    <div class="login-btn" type="HONEYCOMB_IMAGE_CLICK">登录(图标点选)</div>
    <div class="login-btn" type="SCRAPE">登录(刮刮卡)</div>
    <div class="login-btn" type="WORD_ORDER_IMAGE_CLICK">登录(语序点选)</div>
    <div class="login-btn" type="IMAGE_CLICK">登录(图标点选2)</div>
    <div class="login-btn" type="ROTATE_DEGREE">登录(旋转角度)</div>
    <div class="login-btn" type="ROTATE">登录(旋转)</div>
    <div class="login-btn" type="CONCAT">登录(拼接)</div>
    <div class="login-btn" type="WORD_IMAGE_CLICK">登录(汉字点选)</div>
    <div class="login-btn" type="SLIDER">登录(滑块拼图)</div>
    <div class="login-btn" type="CURVE">登录(曲线验证)</div>
    <div class="login-btn" type="SLIDER2">登录(滑块拼图增强版)</div>
</div>

<script>

    $(function () {

        var us = {
            tips_success: "Verification successful",
            tips_error: "Validation failed",
            tips_4001: "try again",
            image_click_title: "Select in this order:",
            scrape_title_before: "Drag slider display",
            scrape_title_after: "let go",
            word_order_image_title: "Click on the text in word order",
            rotate_degree_title: "Drag the slider to make the angle positive",
            slider_title: "Slide to complete the puzzle",
            concat_title: "Slide to complete the puzzle",
            rotate_title: "Slide to complete the puzzle",
            image_click_title_size: "16px",
            word_order_image_title_size: "18px",
            rotate_degree_title_size: "14px",
        }

        $(".login-btn").click(function () {
            const type = $(this).attr("type");
            // 验证码相关配置
            const captchaConfig = {
                // 请求验证码接口
                requestCaptchaDataUrl: "http://localhost:8083/gen?type=" + type,
                // 验证验证码接口
                validCaptchaUrl: "http://localhost:8083/check",
                // 绑定的div
                bindEl: "#captcha-box",
                // 设置为true时传递的时间参数将转换成时间戳
                timeToTimestamp: false,
                // 验证成功回调函数
                validSuccess: (res, c, t) => {
                    console.log("验证码验证成功回调...")
                    // 销毁验证码
                    t.destroyWindow();
                    login(res.data.token);
                },
                // 验证失败回调函数
                validFail: (res, c, t) => {
                    console.log("验证码验证失败回调...")
                    t.reloadCaptcha();
                },
                // 刷新按钮回调事件
                btnRefreshFun: (el, tac) => {
                    console.log("刷新按钮触发事件...")
                    tac.reloadCaptcha();
                },
                // 关闭按钮回调事件
                btnCloseFun: (el, tac) => {
                    console.log("关闭按钮触发事件...")
                    tac.destroyWindow();
                }
            }
            // 验证码样式以及国际化语言
            const style = {
                // 不传默认为中文
                btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",
                bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",
                logoUrl: "https://minio.tianai.cloud/public/static/captcha/images/logo.png",
                moveTrackMaskBgColor: "#f7b645",
                moveTrackMaskBorderColor: "#ef9c0d",
                // 国际化语言,默认是中文
                i18n: us,
                // i18n: null
            }

            // 调用函数加载js、css、以及相
            // 关配置, todo: 注意 style可传空
            initTAC("./tac",captchaConfig,style).then(tac => {
                   // 创建完tac时， 可以设置请求hook,用户转换格式等操作
                tac.config.insertRequestChain(0,{
                    // 请求前hook
                    preRequest(type,requestParam) {
                        console.log("请求前拦截", requestParam.data)
                        return true;
                    },
                    // 请求后hook
                    postRequest(type, requestParam, res) {
                        console.log("请求后拦截", requestParam, res)
                        return true;
                    }
                })
                console.log(tac.config.requestChain)
                // 调用初始化方法初始化验证码
                tac.init();
            }).catch(e => {
                 console.log("加载失败", url)
            })
        });


        function login(captchaToken) {
            $.ajax({
                url: "http://localhost:8083/login",
                type: "POST",
                dataType: "json",
                contentType:  "application/json;charset=UTF-8",
                data: JSON.stringify({
                    token: captchaToken,
                    username: "zhangsan",
                    password: "123456"
                    // 其他参数
                }),
                success: function (response) {
                    if (response.code == 200) {
                        alert("登录成功")
                    }
                }
            });
        }
    });




</script>
</body>
</html>
